<template>
  <div>
    <div class="header">
      <a
        hover-class="none"
        :href="'/pages/wines/main?cateId='+category.id+'&title='+category.cate_name"
      >
        <img
          :src="backHost+category.image"
          mode="aspectFit"
        >
      </a>
    </div>
    <view
      class="wineCards"
      scroll-x=false
    >
      <div
        class="item"
        v-for="(item, index) in products"
        :key="index"
      >

        <a
          class="content"
          hover-class="none"
          :href="'/pages/detail/main?id='+item.id"
        >
          <img
            class="img"
            :src="item.image"
            mode="aspectFit"
          >
          <p class="title">{{item.product_name}}</p>
          <div class="buy">
            <!-- <span class="icon">￥</span> -->
            <!-- <span class="price">{{item.label}}</span> -->
            {{item.label?item.label:''}}
            <span class="oldPrice">原价{{item.original_price}}</span>
          </div>
        </a>

      </div>
    </view>
  </div>
</template>

<script>
//
import { request } from "@/utils";
import config from "@/config";
export default {
  props: ["category"],
  data() {
    return {
      products: [],
      backHost: config.backHost
    };
  },
  methods: {
    async getProduct() {
      var res = await request(
        "/v1/product",
        "get",
        { category_id: this.category.id },
        null
      );
      if (res.data.items.length > 0) {
        this.products = res.data.items.slice(0, 3);
      }
    }
  },
  mounted() {
    this.getProduct();
  }
};
</script>

<style>
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>

<style scoped lang="scss">
.header {
  margin-top: 30rpx;
  img {
    width: 700rpx;
    height: 150rpx;
    margin: 0 25rpx;
  }
}
.wineCards {
  white-space: nowrap;
  margin: 10rpx 25rpx 50rpx;
  width: 700rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .item {
    display: inline-block;
    .content {
      width: 200rpx;
      display: flex;
      flex-direction: column;
      white-space: normal;
      justify-content: flex-start;
      .img {
        width: 200rpx;
        height: 300rpx;
        font-size: 0;
      }
      .title {
        margin-top: 15rpx;
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #343434;
        font-weight: bold;
      }
      .buy {
        white-space: nowrap;
        color: #b93a39;
        margin-top: 12px;
        font-size: 14px;
        line-height: 17px;
        display: table-cell;
        vertical-align: bottom;
        font-weight: bold;
        overflow: hidden;
        width: 200rpx;
        text-overflow: ellipsis;
        .icon {
          font-size: 10px;
        }
        .oldPrice {
          text-decoration: line-through;
          font-size: 18rpx;
          line-height: 18rpx;
          color: #6d6d6d;
          display: inline-block;
          font-weight: normal;
        }
      }
    }
  }
}
</style>

